<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Expanding Div</title>
  <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
  <link rel="apple-touch-icon-precomposed" href="../iui/iui-logo-touch-icon.png" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  <link rel="stylesheet" href="../iui/iui.css" type="text/css" />
  <link rel="stylesheet" title="Default" href="../iui/t/default/default-theme.css"  type="text/css"/>
  <script type="application/x-javascript" src="../iui/iui.js"></script>
  <script type="application/x-javascript" src="../iui/js/iui-event-log.js"></script>
  <script language="JavaScript" type="text/javascript">
function toggleExpando()
{
	var divEl = document.getElementById('expando');
	if (iui.hasClass(divEl, 'expanded'))
	{
		iui.removeClass(divEl, 'expanded');
	}
	else
	{
		iui.addClass(divEl, 'expanded');
	}
}
  </script>

<style type="text/css">
.expando 
{
color:Navy;
font-weight:italic;
background-color: white;
height:100px;
}

.expanded
{
color:Red;
font-style:bold;
height:800px;
}

</style>

</head>

<body>
    <div class="toolbar">
        <h1 id="pageTitle"></h1>
        <a id="backButton" class="button" href="#"></a>
    </div>
    

    <div id="panel" title="Expando" class="panel" selected="true">
		<h2>Expanding Div Test</h2>
		<div id="expando" class="expando">
			<span>Text in an Expanding Div</span>
		</div>
		<a class="whiteButton" href="javascript:toggleExpando()">Toggle Expando</a>
    </div>

</body>

</html>
